<!--  -->
<template>
  <div class="container">
    <div class="mask" v-if="flag" @click="$emit('closeDialog')">
      <div :class="['share-order',flag?'show':'']" @click.stop>
        <div class="top flex justify-between aligin-center pt-14">
          <span class="share-icon"></span>
          <span class="ml-6 mr-auto f-14 f-bold">活动规则</span>
          <span class="close" @click="$emit('closeDialog')"></span>
        </div>
        <div class="mt-20 content-wrapper" v-html="content||c_rule"></div>
      </div>
    </div>  
  </div>
</template>

<script>
import { ruleDetail } from '../api/api'
export default {
  components: {},
  props: {
    flag: {
      type: Boolean,
      default: () => {
        return false
      },
      required: true
    },
    activityId: {
      type: Number,
      default: () => {
        return 0
      }
    },
    shopId: {
      type: Number,
      default: () => {
        return 29
      }
    },
    rule: {
      type: String,
      default: () => {
        return ''
      }
    }
  },

  data() {
    return {
      content: ''
    }
  },
  computed: {
    c_rule() {
      const regex = new RegExp('<img', 'gi')
      let rule = this.rule.replace(
        regex,
        `<img style="max-width: 100%; height: auto;display:block"`
      )
      return rule
    }
  },
  watch: {},
  methods: {
    open() {
      document.body.classList.add('z-overflow-hidden')
    },
    close() {
      document.body.classList.remove('z-overflow-hidden')
    },
    _api() {
      ruleDetail({ id: this.activityId }).then(res => {
        const regex = new RegExp('<img', 'gi')
        this.content = res.data.result.winning_rules.replace(
          regex,
          `<img style="max-width: 100%; height: auto;display:block"`
        )
      })
    },
    request() {
      this._api()
    }
  },
  created() {},
  mounted() {
    
  },
  updated() {
    if (this.flag) {
      this.open()
    } else {
      this.close()
    }
  }, //生命周期 - 更新之后
  beforeDestroy(){
    this.close()
  },
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
@import url('../assets/style/mixin'); //引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
}
.share-order {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 14px;
  width: 100%;
  height: 0;
  box-sizing: border-box;
  z-index: 320;
  background: #fff;
  transition: all 0.3s ease;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .share-icon {
    width: 24px;
    height: 24px;
    .bg-image('../../assets/imgs/reword-rule');
    background-size: 100% 100%;
  }
  .close {
    height: 16px;
    width: 16px;
    .bg-image('../../assets/imgs/close-dialog');
    background-size: 100% 100%;
  }
}
.show {
  height: 543px;
}
.content-wrapper {
  height: 480px;
  overflow: auto;
}
.customer {
  padding: 10px 0 6px;
  height: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #f0474f;
  transition: all 0.3s ease;
  z-index: 999;
  .consultation {
    margin: 0 auto;
    width: 110px;
    height: 28px;
    background: rgba(240, 71, 79, 1);
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
  }
  .tip-text {
    margin-top: 9px;
    font-size: 12px;
    color: rgba(240, 71, 79, 1);
    text-align: center;
  }
}
.customer-show {
  height: 64px;
}
</style>